<template>
	<view class="comp-gm-manager">
		
		<view class="sider">
			<view :class="['menu',active == item.value ? 'active' : '']" v-for="(item,index) in menus" :key="index" @click="change(item.value)">{{item.name}}</view>
		</view>
		<view class="main">
			
			<view class="game" v-if="active == 'game' ">
				<view class="manager-btn" @click="refresh_page">刷新全服页面</view>
			</view>
			
			<view v-if="monsters.length && active == 'monster'">
				<view class="table">
					<view class="tr">
						<view class="th">名称</view>
						<view class="th">血量</view>
						<view class="th">最小攻击</view>
						<view class="th">最大攻击</view>
						<view class="th">最小防御</view>
						<view class="th">最大防御</view>
						<view class="th">速度</view>
						<view class="th">暴击</view>
					</view>
					<view class="tr" v-for="(item,index) in monsters" :key="item._id">
						<view class="td">{{item.nickname}}</view>
						<view class="td">{{item.hp}}</view>
						<view class="td">{{item.min_ac}}</view>
						<view class="td">{{item.max_ac}}</view>
						<view class="td">{{item.min_def}}</view>
						<view class="td">{{item.max_def}}</view>
						<view class="td">{{item.spd}}</view>
						<view class="td">{{item.crit}}</view>
					</view>
										
				</view>
			</view>
			
			<view v-if="items.length && active == 'item'">
				<view class="table">
					<view class="tr">
						<!-- <view class="th" style="width:40px;">图像</view> -->
						<view class="th">名称</view>
						<view class="th">血量</view>
						<view class="th">最小攻击</view>
						<view class="th">最大攻击</view>
						<view class="th">最小防御</view>
						<view class="th">最大防御</view>
						<view class="th">速度</view>
						<view class="th">暴击</view>
						<view class="th">吸血</view>
						<view class="th">固防</view>
						<view class="th">固伤</view>
						<view class="th">经验加成</view>
						<view class="th">金币加成</view>
						<view class="th">暴伤</view>
					</view>
					<view class="tr" v-for="(item,index) in items" :key="item._id">
						<!-- <view class="td"><image class="item-ico" :src="`../../static/items/${item.resid}.png`"></image></view> -->
						<view class="td">{{item.name}}</view>
						<view class="td">{{item.hp}}</view>
						<view class="td">{{item.min_ac}}</view>
						<view class="td">{{item.max_ac}}</view>
						<view class="td">{{item.min_def}}</view>
						<view class="td">{{item.max_def}}</view>
						<view class="td">{{item.spd}}</view>
						<view class="td">{{item.crit}}</view>
						<view class="td">{{item.suck_blood}}</view>
						<view class="td">{{item.fix_def}}</view>
						<view class="td">{{item.fix_ac}}</view>
						<view class="td">{{item.exp_percent}}</view>
						<view class="td">{{item.coin_percent}}</view>
						<view class="td">{{item.crit_percent}}</view>
					</view>
										
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"comp-gm-manager",
		data() {
			return {
				menus:[
					{name:'游戏全局',value:'game'},
					{name:'怪物管理',value:'monster'},
					{name:'物品管理',value:'item'}
				],
				active : '',
				monsters : [],
				items : []
			};
		},
		async created() {
			
		},
		methods : {
			async change(value){
				this.active = value;
				
				switch (value){
					case 'monster':
						this.$request({
							name : 'monster',
							method : 'get_monsters'
						}).then(res => {
							this.monsters = res.data
						})
						break;
					case 'item':
						this.$request({
							name : 'item',
							method : 'get_items'
						}).then(res => {
							this.items = res.data
						})
						break;
					default:
						break;
				}
				
			},
			refresh_page(){
				this.$common.send_message('refresh_page','window')
			}
		}
	}
</script>

<style lang="scss">
	
	image{
		vertical-align: top;
	}
	
	.operate-buttons{
		display: flex;
		gap: 10px;
		.btn{
			border: 1px solid #000;
			background-color: $game-color-2;
			width:fit-content;
			padding:5px 10px;
			margin-bottom:10px;
			cursor: pointer;
		}
	}
	
	
	
	
	.comp-gm-manager{
		width:1200px;
		min-height: 800px;
		display: flex;
		
		.sider{
			width:120px;
			border-right: 1px solid #000;
			display: flex;
			flex-direction: column;
			padding-top:10px;
			gap:10px;
			.menu{
				border: 1px solid #000;
				margin:0 10px;
				height:30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $game-color-2;
				cursor: pointer;
				&.active{
					background-color: $game-color-3;
				}
			}
		}
		.main{
			flex:1;
			padding:10px;
			
			.game{
				display: grid;
				grid-template-columns: repeat(10,1fr);
				column-gap: 10px;
				.manager-btn{
					border: 1px solid #000;
					background-color: $game-color-2;
					display: flex;
					justify-content: center;
					align-items: center;
					height:30px;
					cursor: pointer;
				}
			}
			
		}
		
		
		.table{
			display: table;
			width:100%;
			border: 1px solid #000;
			border-bottom: none;
			border-right: none;
			box-sizing: border-box;
			
			.tr{
				display:table-row;
				.th{
					background-color: $game-color-2;
				}
				.td,.th{
					display:table-cell;
					padding:6px;
					border-bottom: 1px solid #000;
					border-right: 1px solid #000;
					vertical-align: middle;
				}
			}
		}
		
		.item-ico{
			width:40px;
			height:40px;
			border: 1px solid #000;
			background-color: $game-color-2;
			border-radius: 4px;
		}
		
	}
</style>